<template>
  <div>
    <h2>保修统计</h2>
    <div id="chartthree" class="three"></div>
  </div>
</template>

<script lang="ts" setup>
import { inject, onMounted, reactive } from "vue";
import link from "@/api/Link";
import url from "@/api/url";

let $echarts: any = inject("echarts");

onMounted(() => {
  let myChart = $echarts.init(document.getElementById("chartthree"));

  link(url.chartDataThree).then((ok) => {
    // console.log(ok);

    myChart.setOption({
      series: [
        {
          type: "pie",
          data: ok.data,
          radius: [10, 100],
          center: ["50%", "45%"],
          roseType: "area",
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
      tooltip: {},
      legend: { top: "bottom", left: "center" },
    });
  });
});
</script>

<style lang="scss" scoped>
h2 {
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.25rem;
}

.three {
  height: 4.5rem;
}
</style>
